<template>
	<view class="score" @tap="goScoreGood">
		<image :src="good.thumb" class="score_thumb" mode=""></image>
		<view class="score_content">
			<view class="score_content_title">
				{{good.title}}
			</view>
			<view class="score_content_score">
				<icon class="icon icon-score"></icon>
				<view class="score_content_score_price">
					{{good.score}}积分+￥{{good.price}}
				</view>
			</view>
			<view class="score_content_scored">
				已兑换{{good.scored}}件
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ScoreGood",
		data() {
			return {
				
			};
		},
		props: {
			good: {
				type: Object,
				default: function(){
					return {}
				}
			}
		},
		methods: {
			goScoreGood(){
				this.$common.navigateTo({},"/pages/scoreGoods/detail")
			}
		}
	}
</script>

<style lang="scss">
	.score{
		width: 344upx;
		background-color: #fff;
		border-radius: 20upx;
		height: fit-content;
		margin: 10upx 0;
		&_thumb{
			width: 100%;
			height: 344upx;
			border-radius: 6upx;
		}
		&_content{
			box-sizing: border-box;
			padding: 14upx;
			&_title{
				color: #333;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 28upx;
				font-weight: 700;
				line-height: 40upx;
			}
			&_score{
				display: flex;
				margin-top: 20upx;
				box-sizing: border-box;
				padding: 0 10upx;
				display: flex;
				align-items: center;
				&_price{
					font-size: 32upx;
					font-weight: 700;
					color: #e48d04;
					margin-left: 10upx;
				}
			}
			&_scored{
				font-size: 22upx;
				font-weight: 500;
				color: #999;
				margin: 10upx;
			}
		}
	}
</style>